<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两并三串电池原理图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            max-width: 1200px;
            width: 100%;
        }
        
        header {
            text-align: center;
            margin: 20px 0 30px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #00c9ff, #92fe9d);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 1.4rem;
            color: #a8dadc;
            margin-bottom: 15px;
        }
        
        .description {
            max-width: 800px;
            margin: 0 auto;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #e0e0e0;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            margin-top: 20px;
        }
        
        .schematic-container {
            flex: 1;
            min-width: 300px;
            background: rgba(30, 30, 50, 0.7);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(100, 150, 255, 0.3);
        }
        
        .schematic-title {
            text-align: center;
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: #4cc9f0;
        }
        
        #battery-schematic {
            width: 100%;
            height: 500px;
            background: rgba(20, 25, 45, 0.8);
            border-radius: 12px;
            overflow: visible;
        }
        
        .info-panel {
            flex: 1;
            min-width: 300px;
            background: rgba(30, 30, 50, 0.7);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(100, 150, 255, 0.3);
        }
        
        .info-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #4cc9f0;
            text-align: center;
        }
        
        .specs {
            margin-bottom: 25px;
        }
        
        .spec-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            margin-bottom: 10px;
            background: rgba(40, 45, 70, 0.5);
            border-radius: 10px;
            border-left: 4px solid #4361ee;
        }
        
        .spec-value {
            font-weight: bold;
            color: #90e0ef;
        }
        
        .characteristics {
            margin-top: 30px;
        }
        
        h3 {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #4cc9f0;
            border-bottom: 2px solid #4361ee;
            padding-bottom: 8px;
        }
        
        ul {
            padding-left: 25px;
            margin-bottom: 20px;
        }
        
        li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .interactive-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 25px;
        }
        
        .control-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        label {
            width: 120px;
            color: #90e0ef;
        }
        
        input[type="range"] {
            flex: 1;
            height: 8px;
            border-radius: 4px;
            background: #2c3e50;
            outline: none;
            -webkit-appearance: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4cc9f0;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(76, 201, 240, 0.6);
        }
        
        .voltage-display {
            font-size: 1.3rem;
            font-weight: bold;
            text-align: center;
            margin-top: 15px;
            padding: 12px;
            background: rgba(40, 45, 70, 0.7);
            border-radius: 10px;
            border: 2px solid #4361ee;
            color: #90e0ef;
        }
        
        .note {
            margin-top: 30px;
            padding: 15px;
            background: rgba(200, 60, 60, 0.15);
            border-radius: 10px;
            border-left: 4px solid #e63946;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #a8dadc;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .subtitle {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>两并三串电池原理图</h1>
            <div class="subtitle">2P3S 电池组配置图解</div>
            <div class="description">
                本图展示了两并三串（2P3S）电池组的结构原理。这种配置包含3组并联电池单元，每组由2个电池串联而成。
                这种组合方式可以同时增加电压和容量，适用于需要较高电压和较长续航时间的应用场景。
            </div>
        </header>
        
        <div class="content">
            <div class="schematic-container">
                <div class="schematic-title">电池组结构原理图</div>
                <svg id="battery-schematic" viewBox="0 0 800 500"></svg>
            </div>
            
            <div class="info-panel">
                <div class="info-title">电池组规格与特性</div>
                
                <div class="specs">
                    <div class="spec-item">
                        <span>配置方式：</span>
                        <span class="spec-value">两并三串 (2P3S)</span>
                    </div>
                    <div class="spec-item">
                        <span>电池单元数量：</span>
                        <span class="spec-value">6 个</span>
                    </div>
                    <div class="spec-item">
                        <span>电池单元电压：</span>
                        <span class="spec-value">3.7V</span>
                    </div>
                    <div class="spec-item">
                        <span>总电压：</span>
                        <span class="spec-value" id="total-voltage">11.1V</span>
                    </div>
                    <div class="spec-item">
                        <span>单元容量：</span>
                        <span class="spec-value">2500mAh</span>
                    </div>
                    <div class="spec-item">
                        <span>总容量：</span>
                        <span class="spec-value">5000mAh</span>
                    </div>
                </div>
                
                <div class="characteristics">
                    <h3>配置特性</h3>
                    <ul>
                        <li>串联部分（3S）：电压叠加（3.7V × 3 = 11.1V）</li>
                        <li>并联部分（2P）：容量叠加（2500mAh × 2 = 5000mAh）</li>
                        <li>适用于需要高电压和中等容量的应用</li>
                        <li>平衡了电压和容量需求</li>
                        <li>常见于电动工具、无人机和笔记本电脑电池</li>
                    </ul>
                    
                    <div class="interactive-controls">
                        <h3>交互演示</h3>
                        <div class="control-group">
                            <label for="voltage">单元电压：</label>
                            <input type="range" id="voltage" min="20" max="50" value="37">
                            <span id="voltage-value">3.7V</span>
                        </div>
                        
                        <div class="voltage-display">
                            总输出电压：<span id="output-voltage">11.1V</span>
                        </div>
                    </div>
                </div>
                
                <div class="note">
                    <strong>注意：</strong> 实际应用中需要电池管理系统(BMS)来监控和保护电池组，防止过充、过放和温度异常。
                </div>
            </div>
        </div>
        
        <footer>
            <p>两并三串电池原理图 | 电池组配置图解 | 设计用于教学和演示目的</p>
            <p>© 2023 电子工程原理图设计</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const svg = document.getElementById('battery-schematic');
            const ns = 'http://www.w3.org/2000/svg';
            
            // 电池单元样式
            const batteryStyle = {
                fill: '#2a9d8f',
                stroke: '#1d3557',
                strokeWidth: 2,
                width: 60,
                height: 100,
                capHeight: 10,
                capWidth: 30,
                gap: 80,
                rowGap: 120
            };
            
            // 电池组位置
            const startX = 150;
            const startY = 100;
            
            // 创建电池单元函数
            function createBattery(x, y) {
                const group = document.createElementNS(ns, 'g');
                
                // 电池主体
                const body = document.createElementNS(ns, 'rect');
                body.setAttribute('x', x);
                body.setAttribute('y', y);
                body.setAttribute('width', batteryStyle.width);
                body.setAttribute('height', batteryStyle.height);
                body.setAttribute('rx', '5');
                body.setAttribute('fill', batteryStyle.fill);
                body.setAttribute('stroke', batteryStyle.stroke);
                body.setAttribute('stroke-width', batteryStyle.strokeWidth);
                
                // 正极帽
                const cap = document.createElementNS(ns, 'rect');
                cap.setAttribute('x', x + (batteryStyle.width - batteryStyle.capWidth)/2);
                cap.setAttribute('y', y - batteryStyle.capHeight);
                cap.setAttribute('width', batteryStyle.capWidth);
                cap.setAttribute('height', batteryStyle.capHeight);
                cap.setAttribute('rx', '3');
                cap.setAttribute('fill', '#e63946');
                cap.setAttribute('stroke', batteryStyle.stroke);
                cap.setAttribute('stroke-width', batteryStyle.strokeWidth);
                
                // 正极符号
                const plus = document.createElementNS(ns, 'text');
                plus.setAttribute('x', x + batteryStyle.width/2);
                plus.setAttribute('y', y - batteryStyle.capHeight/2 + 5);
                plus.setAttribute('text-anchor', 'middle');
                plus.setAttribute('fill', 'white');
                plus.setAttribute('font-size', '16');
                plus.setAttribute('font-weight', 'bold');
                plus.textContent = '+';
                
                // 负极符号
                const minus = document.createElementNS(ns, 'text');
                minus.setAttribute('x', x + batteryStyle.width/2);
                minus.setAttribute('y', y + batteryStyle.height - 10);
                minus.setAttribute('text-anchor', 'middle');
                minus.setAttribute('fill', 'white');
                minus.setAttribute('font-size', '16');
                minus.setAttribute('font-weight', 'bold');
                minus.textContent = '-';
                
                group.appendChild(body);
                group.appendChild(cap);
                group.appendChild(plus);
                group.appendChild(minus);
                
                return group;
            }
            
            // 创建连接线
            function createLine(x1, y1, x2, y2, width=3, color='#f1faee') {
                const line = document.createElementNS(ns, 'line');
                line.setAttribute('x1', x1);
                line.setAttribute('y1', y1);
                line.setAttribute('x2', x2);
                line.setAttribute('y2', y2);
                line.setAttribute('stroke', color);
                line.setAttribute('stroke-width', width);
                line.setAttribute('stroke-linecap', 'round');
                return line;
            }
            
            // 创建文本
            function createText(x, y, text, size=18, color='#a8dadc') {
                const textElem = document.createElementNS(ns, 'text');
                textElem.setAttribute('x', x);
                textElem.setAttribute('y', y);
                textElem.setAttribute('fill', color);
                textElem.setAttribute('font-size', size);
                textElem.setAttribute('text-anchor', 'middle');
                textElem.setAttribute('font-family', 'Arial, sans-serif');
                textElem.textContent = text;
                return textElem;
            }
            
            // 绘制电池组
            const batteries = [];
            
            // 第一列（第一个串联组）
            for (let i = 0; i < 2; i++) {
                const battery = createBattery(
                    startX, 
                    startY + i * (batteryStyle.height + batteryStyle.gap)
                );
                batteries.push(battery);
                svg.appendChild(battery);
            }
            
            // 第二列（第二个串联组）
            for (let i = 0; i < 2; i++) {
                const battery = createBattery(
                    startX + batteryStyle.width + 100, 
                    startY + i * (batteryStyle.height + batteryStyle.gap)
                );
                batteries.push(battery);
                svg.appendChild(battery);
            }
            
            // 第三列（第三个串联组）
            for (let i = 0; i < 2; i++) {
                const battery = createBattery(
                    startX + 2 * (batteryStyle.width + 100), 
                    startY + i * (batteryStyle.height + batteryStyle.gap)
                );
                batteries.push(battery);
                svg.appendChild(battery);
            }
            
            // 绘制并联连接（每组内部）
            for (let col = 0; col < 3; col++) {
                const x = startX + col * (batteryStyle.width + 100);
                
                // 顶部连接（正极）
                svg.appendChild(createLine(
                    x + batteryStyle.width/2, 
                    startY - batteryStyle.capHeight,
                    x + batteryStyle.width/2, 
                    startY - batteryStyle.capHeight - 30
                ));
                
                svg.appendChild(createLine(
                    x + batteryStyle.width/2 - 20, 
                    startY - batteryStyle.capHeight - 30,
                    x + batteryStyle.width/2 + 20, 
                    startY - batteryStyle.capHeight - 30
                ));
                
                // 底部连接（负极）
                svg.appendChild(createLine(
                    x + batteryStyle.width/2, 
                    startY + batteryStyle.height,
                    x + batteryStyle.width/2, 
                    startY + batteryStyle.height + 30
                ));
                
                svg.appendChild(createLine(
                    x + batteryStyle.width/2 - 20, 
                    startY + batteryStyle.height + 30,
                    x + batteryStyle.width/2 + 20, 
                    startY + batteryStyle.height + 30
                ));
            }
            
            // 绘制串联连接（组间）
            for (let col = 0; col < 2; col++) {
                const x1 = startX + col * (batteryStyle.width + 100) + batteryStyle.width;
                const x2 = startX + (col + 1) * (batteryStyle.width + 100);
                
                // 连接线（从上一组的底部到下一组的顶部）
                svg.appendChild(createLine(
                    x1 + batteryStyle.width/2, 
                    startY + batteryStyle.height + 30,
                    x1 + batteryStyle.width/2 + 50, 
                    startY + batteryStyle.height + 30
                ));
                
                svg.appendChild(createLine(
                    x1 + batteryStyle.width/2 + 50, 
                    startY + batteryStyle.height + 30,
                    x1 + batteryStyle.width/2 + 50, 
                    startY - batteryStyle.capHeight - 30
                ));
                
                svg.appendChild(createLine(
                    x1 + batteryStyle.width/2 + 50, 
                    startY - batteryStyle.capHeight - 30,
                    x2 + batteryStyle.width/2 - 50, 
                    startY - batteryStyle.capHeight - 30
                ));
                
                svg.appendChild(createLine(
                    x2 + batteryStyle.width/2 - 50, 
                    startY - batteryStyle.capHeight - 30,
                    x2 + batteryStyle.width/2 - 50, 
                    startY - batteryStyle.capHeight
                ));
            }
            
            // 添加输入和输出
            // 输入（总正极）
            svg.appendChild(createLine(
                startX + batteryStyle.width/2, 
                startY - batteryStyle.capHeight - 30,
                startX + batteryStyle.width/2 - 100, 
                startY - batteryStyle.capHeight - 30
            ));
            
            svg.appendChild(createText(
                startX + batteryStyle.width/2 - 120, 
                startY - batteryStyle.capHeight - 30,
                "+", 
                20,
                "#90e0ef"
            ));
            
            svg.appendChild(createText(
                startX + batteryStyle.width/2 - 120, 
                startY - batteryStyle.capHeight - 60,
                "总正极", 
                18,
                "#a8dadc"
            ));
            
            // 输出（总负极）
            const lastColX = startX + 2 * (batteryStyle.width + 100);
            svg.appendChild(createLine(
                lastColX + batteryStyle.width/2, 
                startY + batteryStyle.height + 30,
                lastColX + batteryStyle.width/2 + 100, 
                startY + batteryStyle.height + 30
            ));
            
            svg.appendChild(createText(
                lastColX + batteryStyle.width/2 + 120, 
                startY + batteryStyle.height + 30,
                "-", 
                20,
                "#90e0ef"
            ));
            
            svg.appendChild(createText(
                lastColX + batteryStyle.width/2 + 120, 
                startY + batteryStyle.height + 60,
                "总负极", 
                18,
                "#a8dadc"
            ));
            
            // 添加标注
            svg.appendChild(createText(
                startX + batteryStyle.width/2,
                startY + batteryStyle.height + 80,
                "并联连接 (相同电压)",
                16
            ));
            
            svg.appendChild(createText(
                startX + 1.5 * (batteryStyle.width + 100),
                startY - batteryStyle.capHeight - 60,
                "串联连接 (电压叠加)",
                16
            ));
            
            // 添加电压标注
            for (let col = 0; col < 3; col++) {
                const x = startX + col * (batteryStyle.width + 100) + batteryStyle.width/2;
                svg.appendChild(createText(
                    x,
                    startY - batteryStyle.capHeight - 50,
                    "3.7V",
                    16,
                    "#f1faee"
                ));
            }
            
            // 添加总电压标注
            svg.appendChild(createText(
                startX + batteryStyle.width/2 - 60,
                startY - batteryStyle.capHeight - 50,
                "总电压:",
                16,
                "#f1faee"
            ));
            
            svg.appendChild(createText(
                startX + batteryStyle.width/2 - 60,
                startY - batteryStyle.capHeight - 25,
                "11.1V",
                20,
                "#4cc9f0"
            ));
            
            // 添加配置标注
            svg.appendChild(createText(
                startX + 1.5 * (batteryStyle.width + 100),
                startY + 2 * (batteryStyle.height + batteryStyle.gap) + 50,
                "2P3S 电池组配置 (两并三串)",
                24,
                "#4cc9f0"
            ));
            
            // 交互功能
            const voltageSlider = document.getElementById('voltage');
            const voltageValue = document.getElementById('voltage-value');
            const outputVoltage = document.getElementById('output-voltage');
            const totalVoltage = document.getElementById('total-voltage');
            
            voltageSlider.addEventListener('input', function() {
                const voltage = (this.value / 10).toFixed(1);
                voltageValue.textContent = voltage + 'V';
                
                const total = (voltage * 3).toFixed(1);
                outputVoltage.textContent = total + 'V';
                totalVoltage.textContent = total + 'V';
                
                // 更新图中的电压标注
                document.querySelectorAll('#battery-schematic text')[7].textContent = voltage + 'V';
                document.querySelectorAll('#battery-schematic text')[8].textContent = voltage + 'V';
                document.querySelectorAll('#battery-schematic text')[9].textContent = voltage + 'V';
                document.querySelectorAll('#battery-schematic text')[12].textContent = total + 'V';
            });
        });
    </script>
</body>
</html>